<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      margin: 100px auto;
      width: 800px;      height: 600px;
      padding: 10px;
      position: relative;      top: 0px;      left: 0px;
      background-color: aqua;
    }
    p{width: 20px;height: 20px;background-color: green;}
    .head{position: absolute;background-color: red;}

    
  </style>
</head>

<body>

  <div class="box">
    <p class="head" style="position: absolute;left: 20px;top: 0px;"></p>
    <p style="position: absolute;left: 0px;top: 0px;"></p>
  </div>
  
  <script>
    let head = document.querySelector(".head")
    let box = document.querySelector(".box")
    // 移动身体
    let move  = function () {
      // 获取所有的p标签
      let pArr = document.querySelectorAll("p")
      // 从最后一个 往前1个移动,蛇头不移动
      for (let i = pArr.length-1; i > 0; i--) {
        pArr[i].style.left = pArr[i-1].style.left
        pArr[i].style.top = pArr[i-1].style.top        
      }      
    }    

    // 创建食物
    let creatFood = function () {
      let left =  Math.floor(Math.random()*40)
      let top =  Math.floor(Math.random()*30)
      let div = document.createElement("div");
      div.className = "food"
      div.style.width = "20px"
      div.style.height = "20px"
      div.style.borderRadius = "50%"
      div.style.position = "absolute"
      div.style.left = (left*20)+"px";
      div.style.top = (top*20)+"px";
      div.style.backgroundColor = "green"
      box.append(div)
    }
    // 添加身子
    let addBody = function () {
      let pArr = document.querySelectorAll("p")
      let p = document.createElement("p");
      p.style.width = "20px"
      p.style.height = "20px"
      p.style.position = "absolute"
      p.style.backgroundColor = "green"
      // 获取最后一个元素的left 和top
      p.style.left = pArr[pArr.length-1].style.left
      p.style.top = pArr[pArr.length-1].style.top 
      box.append(p)
      // 重新创建食物
      creatFood()
    }
    // 判断是否吃食物
    let eat = function () {
      let food = document.querySelector(".food")
      let head = document.querySelector(".head")
      // 迟到食物
      if (head.style.left==food.style.left&&head.style.top==food.style.top) {
        // 删除食物
        food.remove();
        // 添加身子
        addBody()
      }
    }

    // 移动蛇
    window.onkeydown = function () {
      let left = Number.parseInt(head.style.left)
      let top = Number.parseInt(head.style.top)
      move(); 
      switch (event.code) {        
        case "ArrowRight":        
          left +=20;
          head.style.left = left+"px"
          break;
        case "ArrowLeft":          
          left -=20;
          head.style.left = left+"px"
          break;
        case "ArrowUp":
          top -=20;
          head.style.top = top+"px"
          break;
        case "ArrowDown":
          top +=20;
          head.style.top = top+"px"
          break;
        default:
          break;
      }      
    }
    // 判断什么条件结束游戏
    let end = function () {
      let left = Number.parseInt(head.style.left)
      let top = Number.parseInt(head.style.top)
      // 蛇头出墙
      if (left>=800||top>=600||left<0||top<0) {
        let isstart =  confirm("撞墙了,需要重新开始吗")
        if (isstart) {
          clearInterval(eatid)
          clearInterval(endid)
          location.reload()
        }
        return 
      }
      let pArr = document.querySelectorAll("p")
      // 蛇头咬住自己身子
      for (let i = 1; i < pArr.length; i++) {
        if (head.style.left == pArr[i].style.left&&head.style.top == pArr[i].style.top ) {
          let isstart =  confirm("咬住自己了,需要重新开始吗")
          if (isstart) {
            clearInterval(eatid)
            clearInterval(endid)
            location.reload()
          }
          return 
        }       
      }
    }
    let eatid ;
    let endid;
    window.onload = function () {
      // 开启判断
      eatid =  setInterval(eat,100);
      endid =  setInterval(end,100);
      // 重新创建食物
      creatFood()
    }
  </script>

</body>

</html>